<template>
  <form class="set-form">
    <fieldset>
      <legend>{{ `${table.text}(${table.name})` }}</legend>
      <div class="item f-c-c">
        <label>总数</label>
        <el-input :value="table.total" disabled></el-input>
      </div>
      <div class="item f-c-c">
        <el-button type="success" @click="create(table.name, table.total)" plain
          >生成</el-button
        >
        <el-button type="danger" @click="truncate(table.name)" plain
          >清空</el-button
        >
      </div>
    </fieldset>
  </form>
</template>
<script>
import { createTable, truncateTable } from "@/develop/assets/js/api.js";
export default {
  name: "setForm",
  props: {
    table: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  methods: {
    async create(name, total) {
      let { code, msg } = await createTable({ name, total });
      let type = code == 1 ? "success" : "error";
      this.$message[type](msg);
    },
    async truncate(name) {
      let { code, msg } = await truncateTable({ name });
      let type = code == 1 ? "success" : "error";
      this.$message[type](msg);
    },
  },
};
</script>
<style lang="scss" scoped>
form {
  width: 400px;
  margin: 20px 0;
  fieldset {
    padding: 1em 0;
    border: 1px solid $theme-color;
    border-radius: $border-radius-big;
    background: $background-color-darker;
    legend {
      color: #fff;
      padding: 0.5em 1em;
      border-radius: $border-radius-big;
      margin-left: 1em;
      background: $theme-color;
      font: {
        size: 18px;
        weight: bold;
      }
    }
    label {
      width: 150px;
      margin-right: 10px;
      font-size: 18px;
      letter-spacing: 0.1em;
      text-align-last: right;
    }
    .el-input {
      width: 150px;
    }
    .item {
      margin: 6px 0;
    }
  }
}
</style>